<template>
	<view class="mainPage whitePage login" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="''" noshadow onlyHead></public-head>
		<view class="tabs">
			<view class="tabs-item" :class="tabsNum==0?'active':''" @click="tabs(0)">
				密码登录
			</view>
			<view class="tabs-item" :class="tabsNum==1?'active':''" @click="tabs(1)">
				免密登录
			</view>
		</view>
		
		<view class="box">
			
			<view class="box1" v-if="tabsNum==0">
				<view class="shurukuang">
					<u-field v-model="mobile" placeholder-style="font-size: 32rpx;color: #C4C4C6;"  type="number"  placeholder="请输入手机号" maxlength="11"></u-field>
					<u-field v-model="code" password placeholder-style="font-size: 32rpx;color: #C4C4C6;" type="text"  placeholder="请输入密码"></u-field>
				</view>
				
				<view class="denglu-btn">
					<view class="denglu" v-show="mobile.length < 11">
						登录
					</view>
					<view class="denglu active" v-show="mobile.length == 11" @click="submit(0)">
						登录
					</view>
				</view>
				<view class="zhuce" @click="toregister">
					立即注册
				</view>
			</view>
			
			<view class="box2" v-if="tabsNum==1">
				<view class="shurukuang">
					<u-field v-model="mobile2" placeholder-style="font-size: 32rpx;color: #C4C4C6;"  type="number"  placeholder="请输入手机号" maxlength="11"></u-field>
					<u-field v-model="code2"  placeholder-style="font-size: 32rpx;color: #C4C4C6;" type="number"  placeholder="请输入验证码">
						<u-button size="mini" slot="right" type="warning" @click="getCode">{{codeText}}</u-button>
					</u-field>
					<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
				</view>
				
				<view class="denglu-btn">
					<view class="denglu" v-show="mobile2.length < 11">
						登录
					</view>
					<view class="denglu active" v-show="mobile2.length == 11" @click="submit(1)">
						登录
					</view>
				</view>
				<view class="zhuce"  @click="toregister">
					立即注册
				</view>
			</view>
			<view class="fcc mg-t-60">
				<view class="">登录即代表您已同意</view>
				<view class="" style="color: #FF8F2B;" @click="tiaozhuan()">《宠宠医协议》</view>
			</view>
			<view class="w100pc" style="height: 60rpx;"></view>
		</view>
	</view>
</template>

<script>
	var that
	import publicHead from "@/components/publicHead/publicHead.vue"
	export default {
		components: {
			publicHead
		},
		data() {
			return {
				title: '登录',
				mobile: '',
				code: '',
				mobile2: '',
				code2: '',
				codeText: '',
				tabsNum:0,
			}
		},
		onLoad() {
			that=this
			console.log(that.$util.getUrl1());
			
			console.log(this.$store.state.safeArea.top)
		},
		
		methods: {
			tiaozhuan(){
				uni.navigateTo({
					url:'../../pagesB/mykehu/xieyi'
				})
			},
			submit(e){
				uni.showLoading({
					mask: true,
					title: '加载中...'
				});
				if(e == 0){
					if(that.mobile == ''){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 1500
					});
					return
					}
					if(that.code == ''){
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration: 1500
					});
					return
					}
					uni.showLoading({
					mask: true,
					title: '加载中...'
				});
					let postData = {
						phone:that.mobile,
						password:that.code,
						status:e,
						code:''
					}
					that.$postAjax2('Doctor_doctorLogin',postData,function(data){
						uni.hideLoading()
						uni.setStorageSync('chongdoc_login',JSON.stringify(data.data.data))
						uni.switchTab({
							url:'../workbench/workbench'
						})
						uni.showToast({
							title: '登录成功',
							icon: 'none',
							duration: 1500
						});
					})
				}else{
					if(that.mobile2 == ''){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 1500
					});
					return
					}
					if(that.code2 == ''){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none',
						duration: 1500
					});
					return
					}
					uni.showLoading({
					mask: true,
					title: '加载中...'
				});
					let postData = {
						phone:that.mobile2,
						password:'',
						status:e,
						code:that.code2
					}
					that.$postAjax2('Doctor_doctorLogin',postData,function(data){
						uni.hideLoading()
						uni.setStorageSync('chongdoc_login',JSON.stringify(data.data.data))
						uni.switchTab({
							url:'../workbench/workbench'
						})
						uni.showToast({
							title: '登录成功',
							icon: 'none',
							duration: 1500
						});
					})
				}
				
			},
			tabs(num){
				that.tabsNum=num
			},
			
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if(that.mobile2 == ''){
				uni.showToast({
					title: '请输入手机号',
					icon: 'none',
					duration: 1500
				});
				return
				}
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					let postData = {
						status:2,
						phone:that.mobile2,
						source:2
					}
					that.$postAjax1('Doctor_send_code',postData,function(data){
						setTimeout(() => {
							uni.hideLoading();
							// 通知验证码组件内部开始倒计时
							that.$refs.uCode.start();
						}, 1000);
					})
				}else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			toregister(){
				uni.navigateTo({
					url:'../register/register'
				})
			}
		}
	}
</script>

<style lang="scss">
.box{
	.box1,.box2{
		.shurukuang{
			.u-field{
				padding: 60rpx 0 20rpx;
			}
			.u-label{
				display: none;
			}
		}
	}
}
</style>
<style scoped lang="scss">
.mainPage{
	padding: 0 60rpx;
	.tabs{
		display: flex;
		padding-top: 52rpx;
		padding-bottom: 110rpx;
		.tabs-item{
			font-size: 36rpx;
			font-weight: 400;
			line-height: 50rpx;
			color: #383F49;
			margin-right: 40rpx;
			position: relative;
			
			&.active{
				font-weight: bold;
				&::before{
					position: absolute;
					bottom: -4rpx;
					left: 0;
					content: "";
					display: block;
					width: 142rpx;
					height: 6rpx;
					background: #FF8F2B;
					border-radius: 4rpx;
				}
			}
		}
	}
	.box{
		.box1{
			.shurukuang{
				margin-bottom: 100rpx;
			}
			.denglu-btn{
				margin-bottom: 40rpx;
				.denglu{
					width: 100%;
					height: 86rpx;
					background: #C4C4C6;
					border-radius: 44rpx;
					font-size: 32rpx;
					font-weight: 400;
					line-height: 86rpx;
					text-align: center;
					color: #FFFFFF;
					
					&.active{
						background: #FF8F2B;
					}
				}
			}
			.zhuce{
				text-align: right;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 44rpx;
				color: #FF8F2B;
			}
		
		}
		.box2{
			.shurukuang{
				margin-bottom: 100rpx;
			}
			.denglu-btn{
				margin-bottom: 40rpx;
				.denglu{
					width: 100%;
					height: 86rpx;
					background: #C4C4C6;
					border-radius: 44rpx;
					font-size: 32rpx;
					font-weight: 400;
					line-height: 86rpx;
					text-align: center;
					color: #FFFFFF;
					
					&.active{
						background: #FF8F2B;
					}
				}
			}
			.zhuce{
				text-align: right;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 44rpx;
				color: #FF8F2B;
			}
					
		}
	}
}
</style>
